﻿@*学生用户组列表*@
@using EasyCourse.Model;
@{
    Layout = null;
    CommonPageInfo pageInfo = ViewData[CommonViewDataKey.CommonPageInfo] as CommonPageInfo;
    string para = "CourseId=" + pageInfo.CourseId;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生用户管理</title>
    @Html.Partial("~/Views/Share/PublicHeader.cshtml")
</head>
<body>
    @Html.Partial("~/Views/Share/PublicTopNav4Teacher.cshtml")
    <div class="container">
        <div class="row">
            <h1 class="topTitle-h1">@pageInfo.CourseName<br><small>广州中医药大学康复治疗微课程网络学习平台</small></h1>
        </div>
    </div>
    @*导航菜单*@
    @Html.Partial("~/Views/Share/PublicTeacherNaviMenu.cshtml", 3)
    <div class="container mainwrap">
        <div class="row">
            <div class="col-xs-2">
                <div class="dropdown theme-dropdown clearfix">
                    <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="/UserInfo/StudentList?@para"><span class="glyphicon glyphicon-list"></span> 学生用户列表</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="/UserInfo/AddStudent?@para"><span class="glyphicon glyphicon-user"></span> 新增学生用户</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li class="active" role="presentation">
                            <a role="menuitem" tabindex="-1" href="javascript:void(0)"><span class="glyphicon glyphicon-list"></span> 学生用户组列表</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="/UserInfo/AddStudentGrp?@para"><span class="glyphicon glyphicon-plus"></span> 新增学生用户组</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-10">
                <div class="panel panel-default mainwrap-part">
                    <div class="panel-heading">
                        <ol class="breadcrumb">
                            <li>学生用户管理</li>
                            <li class="active">学生用户组列表</li>
                        </ol>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" id="Jgrp" autocomplete="off" placeholder="请输入组名">
                                        <select multiple size="5" class="form-control grp-sel" id="JgrpSel">
                                         </select>
                                    </div>
                                    <div class="col-xs-2">
                                        <button type="button" class="btn btn-success" id="JgrpSearch" >搜索</button>
                                    </div>
                                    <div class="cols-sm-6">
                                        
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="row">
                            <table class="table table-bordered tb1">
                                <thead>
                                    <tr>
                                        <th width="30%">组名</th>
                                        <th width="10%">学生数</th>
                                        <th width="30%">备注</th>
                                        <th width="10%">创建时间</th>
                                        <th width="20%">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="JgrpTbody">
                                    
                                </tbody>
                            </table>
                        </div>
                        <div class="row clearfix well">
                            <div id="PagInfo" class="pull-left sum"></div>
                            <div class="clearfix pull-right">
                                <ul id="PageTool" class="pagination"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 更改组名的弹框 -->
    <div class="modal fade" id="changeGrpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">编辑组名</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
            <label for="JcGrpName">组名：</label>
            <input type="text" class="form-control" id="JcGrpName" placeholder="">
            </div>
            <div class="form-group">
            <label for="JcRemark">备注：</label>
            <input type="text" class="form-control" id="JcRemark" placeholder="">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" id="JcSubmit" class="btn btn-info">确认修改</button>
          </div>
        </div>
      </div>
    </div>
    @Html.Partial("~/Views/Share/PublicFooter.cshtml")
    @Html.Partial("~/Views/Share/PublicCommonJs.cshtml")
    <script> 
        var grp = $("#Jgrp"),
            grpSel = $("#JgrpSel"),
            grpSearch = $("#JgrpSearch"),
            page = 1,
            pgrpid = "";
        grp.bind("keyup", function () {
            var _txt = grp.val();
            if (!!_txt) {
                $.easyPost("/GrpManage/SearchGrp", {
                    "GrpName": _txt
                }, function (data) {
                    if (data.result) {
                        if (data.rows.length > 0) {
                            var _row = data.rows;
                            var _size = _row.length;
                            var _html = "";
                            for (var i = 0; i < _size; i++) {
                                var _op = _row[i];
                                _html += '<option value="' + _op.Id.trim() + '">' + _op.GroupName + '</option>';
                            }
                            grpSel.html(_html);
                            grpSel.attr("size", _size);
                            grpSel.show();
                        } else {
                            grpSel.hide();
                        }
                    }
                }, "json")
            } else {
                grpSel.hide();
            }
            
        });
        grpSel.bind("click", function (e) {
            var _target = $(e.target);
            grp.val(_target.html());
            grp.attr("grpId", _target.val());
        })
        grpSel.bind("dblclick", function (e) {
            var _target = $(e.target);
            grpSel.hide();
        })
        grpSearch.bind("click", function () {
            grpSel.hide();
           
                var _grpId = grp.val();
                getList(1, _grpId)
            
        })
        var JzyList = $("#JgrpTbody");
        function getList(pageNo, grpid) {
            page = pageNo;
            pgrpid = grpid;
            $.easyPost("/GrpManage/GetGrpList", {
                "PageNO": pageNo,
                "PageSize": 10,
                "GrpName": grpid
            }, function (data) {
                   if (!data.result) {
                       showTips.open(data.message);
                       return;
                   }
                   if (data.rows.length > 0) {
                       var _row = data.rows,
                           _rowL = _row.length,
                           _html = '';
                       var options = {
                           totalPages: data.totalPage,
                           total: data.total,
                           currentPage: pageNo,
                           onPageClicked: function (event, originalEvent, type, page) {
                               getList(page , grpid);
                           }
                       }
                       initialPaginator(options, "PageTool", "PagInfo");
                       for (var i = 0; i < _rowL; i++) {
                           var _grpInfo = _row[i];
                           var time = '';
                           if (_grpInfo.Entity.CreateTime) {
                               var _date = _grpInfo.Entity.CreateTime.toString().replace(/\//g, "");
                               time = eval('new ' + _date);
                           }
                           _html += '<tr data-grpid=\"' + _grpInfo.Entity.Id.trim() + '\">' +
                                        '<td class=\"groupName\">' + _grpInfo.Entity.GroupName + '</td>' +
                                        '<td>' + _grpInfo.StudentNum + '</td>' +
                                        '<td class=\"remark\">' + _grpInfo.Entity.Remark + '</td>' +
                                        '<td>' + time.format('yyyy-MM-dd') + '</td>' +
                                        '<td>' +
                                            '<a class=\"operate\" href=\"/GrpManage/studentlist?GrpId=' + _grpInfo.Entity.Id.trim() +'&CourseId=@pageInfo.CourseId'+ ' "><span class=\"glyphicon glyphicon-user\"><\/span> 成员管理<\/a>' +
                                            '<a class=\"operate aEdit\" href=\"javascript:void(0)\"><span class=\"glyphicon glyphicon-pencil\"><\/span> 编辑<\/a>' +
                                        '</td>' +
                                    '</tr>'
                       }
                       JzyList.html(_html)
                   } else {
                       var _html = '<tr><td colspan="5" align="center">暂无内容</td></tr>'
                       JzyList.html(_html)
                   }
               }, "json");
        }
        getList(page, pgrpid);
        var grpModal = $('#changeGrpModal'),
            JcGrpName = $("#JcGrpName"),
            JcRemark = $("#JcRemark");
        $("#JgrpTbody").bind("click", function (e) {
            var _self = $(e.target);            
            if (_self.hasClass("aEdit") || _self.parent().hasClass("aEdit")) {
                var _edit = _self.hasClass("aEdit") ? _self : _self.parent(),
                    _tr = _edit.parent().parent(),
                    _id = _tr.attr("data-grpid"),
                    _name = $(".groupName", _tr).html(),
                    _remark = $(".remark", _tr).html();
                grpModal.attr("data-grpid", _id);
                JcGrpName.val(_name);
                JcRemark.val(_remark);
                grpModal.modal("show")
            }
        })
        $("#JcSubmit").bind("click", function () {
            var id = grpModal.attr("data-grpid"),
                name = JcGrpName.val(),
                remark = JcRemark.val();
            $.easyPost("/GrpManage/ModifyGrp", {
                "Id": id,
                "GroupName": name,
                "Remark": remark
            }, function (data) {
                if (data.result) {
                    showTips.open("修改成功！");
                    grpModal.modal("hide")
                    getList(page, pgrpid);
                    return;
                } else {
                    showTips.open(data.message)
                }
            }, "json")

        })
    </script>
</body>
</html>
